<template>

    <g
            :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')scale('+scale+')'" class="cursor-pointer"
    >
        <!-- 避雷器的 SVG 图形 -->
        <g>
            <g transform="translate(-20,0)">
                <line  x1="179" y1="77" x2="179" y2="117" :style="{stroke:color,strokeWidth:2}"></line>
                <circle r="10" cx="179" cy="97" :style="{stroke:color,strokeWidth:2}"  fill="none"/>
                <line x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
                <line transform="rotate(-65,189,97)translate(-5,16)" x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
                <line transform="rotate(-65,189,97)translate(-8,8)" x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
            </g>
            <g transform="translate(30,0)">
                <circle r="10" cx="179" cy="97" :style="{stroke:color,strokeWidth:2}"  fill="none"/>
                <line x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
                <line transform="rotate(-65,189,97)translate(-5,16)" x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
                <line transform="rotate(-65,189,97)translate(-8,8)" x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
            </g>
            <g transform="translate(80,0)">
                <line  x1="179" y1="77" x2="179" y2="117" :style="{stroke:color,strokeWidth:2}"></line>
                <circle r="10" cx="179" cy="97" :style="{stroke:color,strokeWidth:2}"  fill="none"/>
                <line x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
                <line transform="rotate(-65,189,97)translate(-5,16)" x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
                <line transform="rotate(-65,189,97)translate(-8,8)" x1="189" y1="97" x2="210" y2="97" :style="{stroke:color,strokeWidth:2}" />
            </g>
        </g>
    </g>
</template>

<script>
export default {
    name: "threeCircle",
    props: {
        translateX: { type: Number, default: 0 },
        translateY: { type: Number, default: 0 },
        rotate: { type: Number, default: 0 },
        scale: { type: Number, default: 1 },
        name: { type: String, default: '' },
        stateDesc:{
            type: String,
            default: ""
        },
        color: { type: String, default: 'rgb(0,210,0)' },
        isMainPage:{
            type: Boolean,
            default: false


        },

    },
    methods: {
    },
}
</script>

<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>
